<template>
  <div class="mall_login">
    <div class="login_h">
      <img class="icon1" src="../../assets/login/icon1.png" alt="">
      <img class="name" src="../../assets/login/name.png" alt="">
      <span class="text">-采购用户登录</span>
      <img class="icon2" src="../../assets/login/icon2.png" alt="">
      <span>100%正品</span>
      <img class="icon3" src="../../assets/login/icon3.png" alt="">
      <span>便利快捷</span>
      <img class="icon4" src="../../assets/login/icon4.png" alt="">
      <span>产品丰富</span>
    </div>
    <div class="login_c">
      <img class="img_c" src="../../assets/login/center_p.png" alt="">
      <div class="login_f_w">
        <h3 class="input_title">采购用户登录</h3>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            class="l_ruleForm"
          >
            <el-form-item label=" " prop="pass">
              <el-input 
                v-model="ruleForm.pass" 
                placeholder="账号名/手机号/邮箱" 
                type="text" 
                autocomplete="off" 
                size="large"
              />
            </el-form-item>
            <el-form-item label=" " prop="checkPass">
              <el-input
                v-model="ruleForm.checkPass"
                type="password"
                autocomplete="off"
                placeholder="密码" 
                size="large"
              />
            </el-form-item>
            <el-form-item label=" " prop="age">
              <el-input v-model.number="ruleForm.age" placeholder="验证码" size="large"/>
            </el-form-item>
            <el-form-item>
              <el-button class="submit_btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
          <h4 class="join_in" @click="buyerJoinIn">采购商入驻</h4>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
// import { onMounted, reactive, ref } from 'vue';
import Footer from '@/components/Footer/index.vue'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
const router = useRouter();
const ruleFormRef = ref()

const checkAge = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入验证码'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入账号名/手机号/邮箱'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}


const buyerJoinIn = () => {
  router.push('/buyerRegister')
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped lang="scss">
.mall_login{
  .login_h{
    width: 100%;
    padding-left: 360px;
    height: 128px;
    display: flex;
    align-items: center;
    .icon1{
      margin-right: 15px;
      width: 45px;
      height: 48px;
    }
    .name{
      width: 405px;
      height: 31px;
    }
    .text{
      font-weight: 400;
      font-size: 18px;
      color: #7B7B7B;
      margin-right: 278px
    }
    .icon2{
      margin-left: 15px;
      width: 30px;
      height: 30px;
    }
    .icon3{
      margin-left: 15px;
      width: 30px;
      height: 30px;
    }
    .icon4{
      margin-left: 15px;
      width: 30px;
      height: 30px;
    }
  }
  .login_c{
    width: 100%;
    height: 696px;
    background: linear-gradient(90deg, rgba(247, 203, 107, .24), rgba(251, 169, 128, .24));
    //background: linear-gradient(90deg, rgba(247, 203, 107, 1), rgba(251, 169, 128, 1));
    //opacity: 0.24;
    padding-left: 381px;
    display: flex;
    align-items: center;
    //margin-bottom: 221px;
    .img_c{
      width: 633px;
      height: 490px;
    }
    .login_f_w{
      width: 440px;
      height: 440px;
      background: #FFFFFF;
      box-shadow: 0px 3px 10px 0px rgba(255,156,0,0.55);
      border-radius: 6px;
      margin-left: 106px;
      .input_title{
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        color: #FF7E00;
        line-height: 50px;
        margin: 34px 0 33px;
      }
      .l_ruleForm{
        padding: 0 60px;
      }
      .join_in{
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 18px;
        color: #0078FE;
        margin-top: 24px;
        cursor: pointer;
      }
      .submit_btn{
        width: 320px;
        height: 50px;
        background: #FF7E00;
        box-shadow: 0px 3px 10px 0px rgba(255,126,0,0.55);
        border-radius: 25px;
        margin-top: 20px;
      }
    }
  }
}
</style>
